<!--https://ext.dcloud.net.cn/plugin?id=300-->
<template>
  <scroll-view class="wuc-tab" :class="tabClass" :style="tabStyle" scroll-with-animation scroll-x :scroll-left="scrollLeft">
    <div v-if="!textFlex">
      <div class="wuc-tab-item" :class="[index === tabCur ? selectClass + ' cur':'']" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
        <text :class="item.icon"></text>
        <span>{{item.name}}</span>
      </div>
    </div>

    <div class="flex text-center" v-if="textFlex">
      <div class="wuc-tab-item flex-sub" :class="index === tabCur ? selectClass + ' cur':''" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
        <text :class="item.icon"></text>
        <span>{{item.name}}</span>
      </div>
    </div>
  </scroll-view>
</template>
<script>
export default {
	name: 'wuc-tab',
	data() {
		return {}
	},
	props: {
		tabList: {
			type: Array,
			default() {
				return []
			}
		},
		tabCur: {
			type: Number,
			default() {
				return 0
			}
		},
		tabClass: {
			type: String,
			default() {
				return ''
			}
		},
		tabStyle: {
			type: String,
			default() {
				return ''
			}
		},
		textFlex: {
			type: Boolean,
			default() {
				return true
			}
		},
		selectClass: {
			type: String,
			default() {
				return 'text-black'
			}
		}
	},
	methods: {
		tabSelect(index, e) {
			if (this.tabCur === index) return false
			this.$emit('change', index)
		}
	},
	computed: {
		scrollLeft() {
			return (this.tabCur - 1) * 60
		}
	}
}
</script>
<style scoped>
div, scroll-view, swiper {
	box-sizing: border-box;
}
.wuc-tab {
    white-space: nowrap;
	position: fixed;
	top: 0;
	z-index: 888;
	background-color: #fff;
}
.wuc-tab {
	border:  2px solid #ebedf0;
	/*margin-bottom: 20upx;*/
}
.wuc-tab-item {
    height: 90upx;
    display: inline-block;
    line-height: 90upx;
    margin: 0 10upx;
    padding: 0 20upx;
	color: #7d7e80;
}

.wuc-tab-item.cur {
    border-bottom: 4upx solid;
	font-size: 26px;
}

.wuc-tab.fixed {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1024;
	box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}

.flex {
    display: flex;
}
.text-center {
    text-align: center;
}
.flex-sub {
    flex: 1;
}
.text-blue{
  color:#0081ff;
}
.text-white{
  color:#ffffff;
}
.bg-white{
    background-color: #ffffff;
}
.bg-blue{
    background-color: #0081ff;
}
.text-orange{
  color: rgb(255, 209, 26)
}
.text-black{
	color: #333333
}
.text-black.cur {
	border-color: rgb(255, 209, 26);
}

.text-xl {
	font-size: 36upx;
}
</style>
